<template>
  <div>
    <!-- 顶部搜索条件 -->
    <Search @searchBy="getSearch" ref="Search" :changeId="changeId"></Search>
    <div class="topLine">
      <div class="topLine__left">
        <el-button size="mini" type="primary" @click="publishGoods">发布商品</el-button>
        <!-- 设置分类 -->
        <SetClassify @command="commandVal" ref="setClass" :goodIds="goodIds" :showGetList="showGetList"
          @changeIds="getGoodList" style="margin-left: 20px" :is-item="false" :is-value="false">设置分类</SetClassify>
      </div>
    </div>
    <!-- 商品列表 -->
    <GoodsList @goodId="getGoodId" ref="goodsList" @getShowProList="getShowProList" :changeId="changeId"
      v-if="changeId"></GoodsList>
    <div class="listBottom">
      <!-- 设置分类 -->
      <SetClassify @command="commandVal" ref="setClass" :goodIds="goodIds" :showGetList="showGetList"
        @changeIds="getGoodList" :is-item="false" />
      <PageManage :pageSize="pageSize" :pageNum="pageNum" :total="total" @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange" style="margin-top: 0px"></PageManage>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch, Ref } from "vue-property-decorator";

import {
  GoodDel,
  GoodUpDown,
  updateDominoState,
  updateGoodsApart,
} from "@/api/good/goods";
import GoodsList from "./components/GoodsList.vue";
import SetClassify from "./components/goodsComp/SetClassify.vue";
import Search from "./components/Search.vue";
import PageManage from "@/components/PageManage.vue";

@Component({
  components: {
    GoodsList,
    SetClassify,
    Search,
    PageManage,
  },
})
export default class ListApart extends Vue {
  @Prop({})
  saleMode: any;

  changeId = "";

  @Watch("saleMode")
  getNewModeId() {
    this.changeId = this.saleMode;
  }

  @Ref()
  readonly setClass: HTMLFormElement;

  /** 选择的数组id */
  goodIds: number[] = [];

  /** 用于批量展示分类获取已选择的分类 */
  showGetList: any[] = [];

  /** 顶部搜索条件 */
  searchType = {} as any;

  /** 分页条数 */
  pageSize = 0;

  /** 分页页码 */
  pageNum = 0;

  /** 数据长度 */
  total = 0;

  /** 获取商品数组信息 */
  goodsList: any = "";

  /** 获取区域内提货点 */
  areaList = [];

  /** 设置投放区域 */
  dialogArea = false;

  /** 配送设置内容 */
  rections = {
    autoShippingState: 1 /** 设置新增提货点是否自动设置送货上门,0false=禁用,1true=启用 */,
    goodPointIdsPercentage: "",
  };

  mounted() {
    this.changeId = this.saleMode;
    // this.getShipperLinePointList();
  }

  /** 处理areaList */
  dealAreaLists(list) {
    list.forEach((e) => {
      e.id = e.lineId;
      e.list = e.lists;
      e.name = e.lineName;
      e.list.forEach((i) => {
        i.id = i.communityId;
        i.list = i.lists;
        i.name = i.communityName;
        i.list.forEach((c) => {
          c.id = c.pointId;
          c.name = c.pointName;
          c.isChosen = c.isChoice;
        });
      });
    });
  }

  /**
   * 发布商品
   */
  publishGoods() {
    this.$router.push({
      name: "AddGood",
      query: { saleMode: this.changeId },
    });
  }

  /** 根据选择批量操作 */
  commandVal(val: string, type = false) {
    const list = (this.$refs.goodsList as any).tableCheckedItem;
    list.forEach((item) => {
      this.goodIds.push(item.id);
    });
    if (this.goodIds.length === 0) {
      this.$message.error("请先选择商品");
      return;
    }
    if (type) {
      this.transApart(val);
      return;
    }
    switch (val) {
      case "8":
        this.delByIds();
        break;
      case "6":
      case "7":
        this.upDownGoods(val);
        break;
      case "4":
      case "5":
        this.domino(val);
        break;
      case "3":
        this.getGoodArea();
        break;
      case "1":
      case "2":
        this.transApart(val);
        break;
    }
  }

  /**
   * 批量转移拼团，秒杀专区
   */
  transApart(val) {
    const selectItem = this.goodsList.regionList.filter(
      (item) => item.id === val,
    );
    const modeType = selectItem[0].modeType === "GROUP" ? "GROUP" : 0;
    updateGoodsApart(val, modeType, this.goodIds)
      .then((res) => {
        if (res.code === 200) {
          this.$message.success(`商品已${selectItem[0].text}`);
          this.getGoodList();
        }
      })
      .catch((e) => {
        this.$message.error(e || "网络错误");
      });
  }

  /**
   * 获取投放区域
   */
  getGoodArea() {
    let a = [];
    this.goodIds.forEach((item) => {
      this.goodsList.goodList.forEach((v) => {
        if (item === v.id) {
          const b = v.launchArea ? v.launchArea.split(",") : [];
          a = Array.from(new Set(a.concat(b)));
        }
      });
    });
    this.areaList.forEach((e) => {
      e.list.forEach((i) => {
        i.list.forEach((c) => {
          c.isChosen = 0;
          a.forEach((t) => {
            if (t === c.pointId) {
              c.isChosen = 1;
            }
          });
        });
      });
    });
    this.dialogArea = true;
  }

  /**
   * 批量删除
   */
  async delByIds() {
    try {
      await this.$confirm("确定要删除选中商品吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      });
      const { code } = await GoodDel(this.goodIds, 0, {});
      if (code === 200) {
        this.$message.success("删除成功");
        this.getGoodList();
      }
    } catch (error) {
      console.log(error);
    }
  }

  /**
   * 批量上下架操作
   */
  async upDownGoods(val) {
    const list = this.goodsList.goodList;
    const hasNoType = list.some(
      (item) => item.productShowCategorys.length === 0,
    );
    if (hasNoType) {
      this.$message.error("选择商品中有未编辑分类商品，请先编辑后在进行操作");
      return;
    }
    const { code } = await GoodUpDown(val === "6" ? 1 : 0, 0, this.goodIds);
    if (code === 200) {
      this.$message.success(`商品已${val === "6" ? "上架" : "下架"}`);
      this.getGoodList();
    }
  }

  /**
   * 批量接龙操作
   */
  async domino(val) {
    const { code } = await updateDominoState(val === "4" ? 1 : 0, this.goodIds);
    if (code === 200) {
      this.$message.success(`商品已${val === "4" ? "参加" : "取消"}接龙活动`);
      this.getGoodList();
    }
  }

  /**
   * 获取选中商品ids数组
   */
  getGoodId(data) {
    this.goodIds = data;
  }

  /** 展示分类获取已选择的分类  */
  getShowProList(data) {
    this.showGetList = data || [];
    this.goodsList = this.$refs.goodsList as GoodsList;
    this.total = this.goodsList.total;
    this.pageSize = this.goodsList.searchType.size;
    this.pageNum = this.goodsList.searchType.current;
  }

  /**
   * 获取商品列表
   */
  getGoodList() {
    this.goodsList.searchType = Object.assign(
      this.goodsList.searchType,
      this.searchType,
    );
    this.goodsList.getProduct();
  }

  /**
   * 获取搜索条件
   */
  getSearch(data) {
    this.searchType = data;
    this.searchType.current = 1;
    this.getGoodList();
  }

  /**
   * @method handleSizeChange
   * @description 每页 条
   */
  handleSizeChange(val) {
    this.goodsList.searchType.size = val;
    this.goodsList.getProduct();
  }

  /**
   * @method handleCurrentChange
   * @description 当前页
   */
  handleCurrentChange(val) {
    this.goodsList.searchType.current = val;
    this.goodsList.getProduct();
  }
}
</script>

<style lang="scss" scoped>
@import "../../../assets/styles/goods/index.scss";

.topLine {
  display: flex;
  justify-content: space-between;
  align-items: center;
  &__left {
    display: flex;
  }
  &__right {
    width: 450px;
    display: flex;
    justify-content: space-around;
  }
}

.listBottom {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  bottom: 10px;
  width: 990px !important;
  background-color: white;
  padding: 10px 0px;
  z-index: 10;
}
</style>
